<template>
	<div class="">
		<div class="search">
			<el-form
				:inline="true"
				:model="state.form"
				class="demo-form-inline"
				ref="form"
			>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="项目业务类型" prop="">
							<el-select v-model="state.form.user" placeholder="">
								<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="项目类型">
							<el-input v-model="state.form.user"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="content d-flex m-t20">
			<div class="left">
				<CommonTitle titleName="项目实施阶段规划">
					<template #rightCnBox>
						<span class="m-l20">共计N个阶段</span>
						<el-button class="m-l20" type=""> 新增阶段 </el-button>
					</template>
				</CommonTitle>

        <div class="itembox">
          <div class="item d-flex">
            <div class="left_op">

            </div>
            <div class="let_name">

            </div>
            <div class="left_dep">
              
            </div>
          </div>
        </div>
			</div>
			<!-- 分割线 -->
			<div class="divider"></div>
			<div class="right"></div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import { ElForm, ElSelect, ElRow, ElCol, ElInput } from "element-plus";
const options = [
	{
		label: "全部",
		value: "",
	},
	{
		label: "投资类",
		value: 1,
	},
	{
		label: "设计类",
		value: 2,
	},
	{
		label: "开发类",
		value: 3,
	},
	{
		label: "运营类",
		value: 4,
	},
	{
		label: "公共类",
		value: 5,
	},
];
const state = reactive({
	form: {},
});

const handel = () => {};
</script>
<style lang="scss" scoped>
// .el-input,
// .el-select {
// 	width: 100%;
// }

.content {
	width: 100%;
	border: 1px solid #ccc;
	padding: 20px;
	min-height: 500px;
	border-radius: 10px;
	justify-content: space-between;
	.left {
		width: 49%;
	}
	.right {
		width: 49%;
	}
}
.divider {
	min-height: 500px;
	height: 100%;
	width: 1px;
	background-color: #ccc;
}
</style>
